<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--ie使用edge渲染模式-->
    <meta name="renderer" content="webkit"><!--360渲染模式-->
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=no">
    <title>服务承诺设置</title>
    <link rel="stylesheet" href="../../css/basic.css">
    <style type="text/css">
        .promise-area {
            height: auto;
            width: 90%;
            margin: auto;
        }

        .promise-ul li {
            padding: 0.3rem 0 0.2rem 0;
            position: relative;
            height: auto;
            width: 100%;
            border-bottom: 1px solid #e3e3e3;
        }

        /*选择区域*/
        .agreement {
            position: relative;
            width: 100%;
            height: 0.5rem;
            margin-top: 0.2rem;
        }

        .agreement span {
            line-height: 0.56rem;
            color: #666;
            font-size: 0.28rem;
            padding-left: 0.2rem;
        }

        /*选矿样式*/
        /*隐藏*/
        #checkboxInput,#checkboxInputOne,#checkboxInputTwo{
            display: none;
        }

        .checkbox-area {
            float: left;
            width: 0.2rem;
            height: 0.2rem;
            position: relative;
            margin-top: 0.15rem;
        }

        /* Create the checkbox button*/
        .checkbox-area label {
            display: block;
            width: 100%;
            height: 100%;
            -webkit-transition: all .5s ease;
            -moz-transition: all .5s ease;
            -o-transition: all .5s ease;
            -ms-transition: all .5s ease;
            transition: all .5s ease;
            cursor: pointer;
            z-index: 1;
            background: snow;
            border: 1px solid #CDC9C9;
        }

        /*Create the checked state*/
        .checkbox-area input[type=checkbox]:checked + label {
            background: #EE2C2C;
        }

        /*选矿end*/
        .judgeBox input,.selectBox input{display: none}
        .judgeBox p,.selectBox p{
            height: 0.5rem;
            display: inline-block;
            /*width: 2.6rem;*/
            text-align: center;
        }
        .selectBox p{
            width: 26%;
            float: left;
            margin: 0.15rem 0.2rem;
        }
        .judgeBox p label,.selectBox p label{
            width: 100%;
            height: 100%;
            display: inline-block;
            border-color: #666;
            border-style: solid;
            border-width: 1px;
            border-radius: 0.1rem;
        }
        .selectBox p label{
            /*margin: 0 0.3rem;*/
        }
        .judgeBox p input[type=checkbox]:checked + label,
        .selectBox p input[type=checkbox]:checked + label{
            background-color: #FA8072;
            color: white;
            border-color: transparent;
        }
        .judgeBox,.selectBox{
            padding-bottom: 0.1rem;
            overflow: hidden;
            width: 90%;
            height: auto;
            line-height: 0.5rem;
            margin: 0.2rem auto 0 auto;
            font-size: 0.25rem;
            color: #666;
            padding-right: 0.1rem;
        }
        .judgeBox p{
            margin: 0.15rem 0.3rem;
        }
        .serve-list{
            height: auto;
            width: 100%;
        }
        .serve-list ul{
            padding-top: 0.3rem;
        }
        .serve-list ul li{
            padding: 0;
            border-bottom: none;
            font-size: 0.28rem;
            color: #666;
            line-height: 0.6rem;
        }
        .punish-btn-area{
            width: 50%;
            height: 0.8rem;
            margin: 0.6rem auto 1rem auto;
        }
        .punish-btn{
            height: 100%;
            width: 100%;
            background-color: #F23A38;
            border-radius: 10px;
            outline: none;
            color: white;
            font-size: 0.28rem;
        }
    </style>
    <script src="../../lib/basicSize.js"></script>
</head>
<body>
<!--导航-->
<div class="top-nav-area">
    <ul>
        <a class="back-a" href="javascript:history.back(-1)"></a>
        <li>服务承诺设置</li>
    </ul>
</div>
<!--主体-->
<div class="main-body-area">
    <div class="promise-area">
        <ul class="promise-ul">
            <li>
                <div class="agreement">
                    <section>
                        <div class="checkbox-area">
                            <input type="checkbox" id="checkboxInput" name="">
                            <label for="checkboxInput"></label>
                        </div>
                    </section>
                    <span>免费搬楼 (超出每层收费10元/件(单件25公斤以上))</span>
                </div>
                <div class="judgeBox">
                    <p>
                        <input name="checkBoxArea" type="checkbox" id="check1"/>
                        <label for="check1">三楼及三楼以下免费</label>
                    </p>
                    <p>
                        <input name="checkBoxArea" type="checkbox" id="check2"/>
                        <label for="check2">七楼及七楼以下免费</label>
                    </p>
                    <p>
                        <input name="checkBoxArea" type="checkbox" id="check3"/>
                        <label for="check3">十楼及十楼以下免费</label>
                    </p>
                </div>
            </li>
            <li>
                <div class="agreement">
                    <section>
                        <div class="checkbox-area">
                            <input type="checkbox" id="checkboxInputOne" name="">
                            <label for="checkboxInputOne"></label>
                        </div>
                    </section>
                    <span>无物流地址，超出30公里部分收费</span>
                </div>
                <div class="selectBox">
                    <p>
                        <input name="selectBox" type="checkbox" id="box1"/>
                        <label for="box1">3元/公里</label>
                    </p>
                    <p>
                        <input name="selectBox" type="checkbox" id="box2"/>
                        <label for="box2">4元/公里</label>
                    </p>
                    <p>
                        <input name="selectBox" type="checkbox" id="box3"/>
                        <label for="box3">5元/公里</label>
                    </p>
                    <p>
                        <input name="selectBox" type="checkbox" id="box4"/>
                        <label for="box4">6元/公里</label>
                    </p>
                </div>
            </li>
            <li style="border-bottom: none">
                <div class="agreement">
                    <section>
                        <div class="checkbox-area">
                            <input type="checkbox" id="checkboxInputTwo" name="">
                            <label for="checkboxInputTwo"></label>
                        </div>
                    </section>
                    <span>可提供免费仓储</span>
                </div>
                <div class="serve-list">
                    <ul>
                        <li>基本服务承诺(表示师傅默认支持，不可更改)</li>
                        <li>支持喵/汪师傅核销</li>
                        <li>空跑费(配送类50元/次，安装30元/次)</li>
                        <li>基本服务承诺(表示师傅默认支持，不可更改)</li>
                        <li>支持喵/汪师傅核销</li>
                        <li>空跑费(配送类50元/次，安装30元/次)</li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
    <div class="punish-btn-area">
        <button class="punish-btn">立即注册</button>
    </div>
</div>
<script src="../../../master/lib/check/jquery-1.7.2.min.js"></script>
</body>
</html>